<template>
    <box title="区域统计" class="">
      <!-- 日期选择 -->
      <template #title-right>
        <div class="flex cursor-pointer">
          <div v-for="(item, index) in List" :key="index" class="text-[#ffffff] w-[38px] h-[26px]
                  bg-contain   "
               :class="selectTime == index ? 
               getDataImg('selectTime') :getDataImg('defaultSelectTime')"
               @click="changeList(item, index)">
            <div class="text-center leading-[26px]">
              {{ isNullOrEmpty( item?.name ) }}
            </div>
  
          </div>
        </div>
      </template>
      <div class="p-[16px] h-[220px]"><!-- :style="{ height: hightdata + 'px' }"-->
        <pie 
        :data="piedata" 
        :withorhight="80"
        />
       </div>
        
    </box>
  </template>
  <script lang="ts" setup>
  import { getDataImg } from "@/utils/data-themset"
import { isNullOrEmpty } from '@/utils/functions'
  import {superviseregion} from '@/api/screen/largeData'
  import box from '@/views/large-data-screen/component/box.vue'
  import pie from '@/views/large-data-screen/component/echarts/pie.vue'
  const selectTime = ref(0) //选择项目，家庭
  const piedata = ref([])
  const region = ref(0)
  const List = ref([
   { name: '全部', id: 0 },
    { name: '项目', id: 1 },
    { name: '家庭', id: 2 },
  ])
  onMounted(() => {
    getscreeninspect()
  })
  
  //点击
const changeList = (item, index) => {
  selectTime.value = index
  region.value = item.id
  getscreeninspect()
}
  //获取设备统计
  const getscreeninspect = () => {
    superviseregion({
    region:region.value
  }).then(res => {
  console.log("ces",res);
  res.result.forEach(item=>{
    item.name = item.projectCity
    item.value = item.num
  })
      piedata.value = res.result
  
  
    })
  }
  </script>
  